<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件对象</title>
    <style>
        #box1 {
            width: 300px;
            height: 300px;
            background-color: greenyellow;
        }
        #box2{
            width: 250px;
            height: 250px;
            background-color: blue;
        }
        #box3{
            width: 200px;
            height: 200px;
            background-color:green ;
        }
    </style>
    <script>
        /* 
            在DOM中存在着多种不同类型的事件对象
                多种事件对象有一个共同的祖先Event

                属性：
                    event.target                表示的是触发事件的对象
                    event.currenttarget         表示的是绑定事件的对象，同绑定函数的this一样

                    event.stopPropagation()     停止事件的传导
                    event.preventDefault()      取消默认行为
                事件的冒泡（bubble）
                    事件冒泡就是指事件的向上传导。
                    当元素的某个事件被触发后，其祖先元素上的相同事件也会同时被触发。
                    冒泡的存在简化了JS的编写，但是在一些场景下，我们并不希望冒泡存在。  
                    不希望事件冒泡时，可以通过事件对象来取消冒泡，
                    

                event.target    表示的是触发事件的对象
                this            表示的是绑定事件的对象  
        */
        document.addEventListener("DOMContentLoaded", function () {
            const box1 = document.getElementById("box1")
            const box2 = document.getElementById("box2")
            const box3 = document.getElementById("box3")
            const a=document.getElementsByTagName("a")[0]
            box1.addEventListener("click",function(event){
                console.log( "触发事件的对象-->",event.target,"绑定事件的对象-->",this)
            })

            // box2.addEventListener("click",function(event){
            //     console.log("box2",event.target)
            //     event.stopPropagation()
            // })

            // box3.addEventListener("click",function(event){
            //     console.log("box3",event.target)
            //     event.stopPropagation()         // 取消事件的传导
            // })
            a.addEventListener("click",function(event){
                let flag=confirm("是否跳转？")
                flag||event.preventDefault()  //取消默认行为
            })
        })
    </script>
</head>

<body>
    <div id="box1">
        <div id="box2">
            <div id="box3"></div>
        </div>
    </div>
    <a href="./images/IMG_3.JPG" >超链接</a>
</body>

</html>